<template>
	<div class="page-banner">
		<div class="left" @contextmenu.prevent="openScenarioForm($event)">
			<p class="title">场景列表</p>

			<ul>
				<li
					v-for="(item, index) in options.scenario"
					:key="index"
					:class="{
						active: item.id == selects.scenarioId
					}"
					@click="changeScenario(item.id)"
					@contextmenu.prevent.stop="openScenarioForm($event, item)"
				>
					{{ item.name }}
				</li>
			</ul>
		</div>

		<cl-crud class="right" @load="onLoad" v-if="selects.scenarioId != 3">
			<template #table-column-pick="{scope}">
				<el-image
					fit="fill"
					:src="scope.row.pick"
					style="height: 130px;width: 355px;"
				></el-image>
			</template>

			<template #table-column-link="{scope}">
				<el-link type="primary" :href="scope.row.link">{{ scope.row.link }}</el-link>
			</template>

			<template #table-column-status="{scope}">
				<el-tag type="danger" v-if="scope.row.status == 'close'">禁用</el-tag>
				<el-tag v-if="scope.row.status == 'open'">启用</el-tag>
			</template>
		</cl-crud>

		<div class="right" v-if="selects.scenarioId == 3">
			<cl-crud @load="onLoad2">
				<template #table-column-pick="{scope}">
					<el-image
						fit="fill"
						:src="scope.row.pick"
						style="height: 130px;width: 355px;"
					></el-image>
				</template>
				<template #table-column-ractivityTime="{scope}">
					<div>
						{{ scope.row.startTime | dateFormatLine2 }} --
						{{ scope.row.endTime | dateFormatLine2 }}
					</div>
				</template>
				<template #table-column-type="{scope}">
					<div v-if="scope.row.type == 1">复制口令</div>
					<div v-if="scope.row.type == 2">跳转链接</div>
				</template>
				<template #table-column-link="{scope}">
					<el-link type="primary" v-if="scope.row.link" :href="scope.row.link">{{
						scope.row.link
					}}</el-link>
					<el-button type="text" v-if="scope.row.tkl" v-copy="scope.row.tkl">{{
						scope.row.tkl
					}}</el-button>
				</template>

				<template #table-column-status="{scope}">
					<el-tag type="danger" v-if="scope.row.status == 'close'">禁用</el-tag>
					<el-tag v-if="scope.row.status == 'open'">启用</el-tag>
				</template>
			</cl-crud>
		</div>

		<cl-context-menu ref="scenario-context-menu"> </cl-context-menu>
		<cl-form ref="scenario-form"> </cl-form>
	</div>
</template>

<script>
import moment from 'moment';
export default {
	data() {
		return {
			crud: null,
			selects: {
				scenarioId: ''
			},
			options: {
				scenario: []
			}
		};
	},
	created() {
		this.refreshScenario();
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.systemMenagement.banner)
				.set('table', {
					columns: [
						{
							type: 'selection',
							align: 'center'
						},
						{
							label: '图片',
							prop: 'pick',
							align: 'center',
							width: 400
						},
						{
							label: '跳转链接',
							prop: 'link',
							align: 'center'
						},
						{
							label: '标题',
							prop: 'title',
							align: 'center'
						},
						{
							label: '场景',
							prop: 'name',
							align: 'center'
						},
						{
							label: '排序',
							prop: 'level',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						}
					]
				})
				.set('upsert', {
					props: {
						width: '700px',
						labelWidth: '100px'
					},
					items: [
						{
							label: '大标题',
							prop: 'bigTitle',
							hidden: true,
							component: {
								name: 'el-input'
							},
							rules: {
								required: true,
								message: '请输入大标题'
							}
						},
						{
							label: '轮播图高度',
							prop: 'imageSize',
							span: 15,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入图片高度,不输入就不限制图片大小'
								},
								on: {
									change(val) {
										app.setData(
											'upsert.items[prop:pick].component.props.size',
											val
										);
									}
								}
							}
						},
						{
							label: '图片地址',
							prop: 'pick',
							component: {
								name: 'cl-upload',
								props: {
									height: '126px',
									width: '355px',
									isLimit: true,
									size: ''
								}
							},
							rules: {
								required: true,
								message: '图片地址不能为空'
							}
						},
						{
							label: '跳转链接',
							prop: 'link',
							component: {
								name: 'el-input'
							},
							rules: {
								required: true,
								message: '跳转链接不能为空'
							}
						},
						{
							prop: 'ractivityTime',
							label: '活动时间',
							hidden: true,
							value: [
								moment().format('YYYY-MM-DD'),
								moment()
									.add(1, 'day')
									.format('YYYY-MM-DD')
							],
							component: {
								name: 'el-date-picker',
								props: {
									type: 'daterange'
								}
							},

							rules: [
								{
									required: true,
									message: '请选择时间'
								}
							]
						},
						{
							label: '标题',
							prop: 'title',
							component: {
								name: 'el-input'
							},
							rules: {
								required: true,
								message: '标题不能为空'
							}
						},
						{
							label: '口令',
							prop: 'tkl',
							hidden: true,
							component: {
								name: 'el-input'
							},
							rules: {
								required: true,
								message: '口令不能为空'
							}
						},
						{
							label: '场景',
							prop: 'scenarioId',
							component: {
								name: 'el-select',
								options: []
							},
							rules: {
								required: true,
								message: '场景不能为空'
							}
						},
						{
							label: '跳转类型',
							prop: 'type',
							component: {
								name: 'el-select',
								options: [
									{
										label: '页面',
										value: 3
									},
									{
										label: '链接',
										value: 4
									},
									{
										label: '小程序链接',
										value: 5
									}
								]
							}
						},
						{
							label: '排序',
							prop: 'level',
							value: 1,
							component: {
								name: 'el-input-number',
								props: {
									min: 0
								}
							}
						},
						{
							label: '状态',
							prop: 'status',
							value: 'open',
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '启用',
										value: 'open'
									},
									{
										label: '禁用',
										value: 'close'
									}
								]
							},
							rules: {
								required: true,
								message: '状态不能为空'
							}
						},
						{
							label: '备注',
							prop: 'remark',
							hidden: true,
							component: {
								name: 'el-input'
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'multi-delete-btn', 'flex1'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', async (isEdit, data) => {
					console.log(this.selects.scenarioId);
					if (this.selects.scenarioId) {
						app.setForm('scenarioId', this.selects.scenarioId);
					}
					if (this.selects.scenarioId == 7) {
						app.hiddenItem('bigTitle', false);
						if (!isEdit) {
							app.setForm('imageSize', 96);
						}
					} else {
						app.hiddenItem('bigTitle', true);
					}
					if (this.selects.scenarioId == 8) {
						if (!isEdit) {
							app.setForm('imageSize', 140);
						}
					}
					if (this.selects.scenarioId == 9) {
						app.hiddenItem('tkl', false);
					} else {
						app.hiddenItem('tkl', true);
					}

					if (this.selects.scenarioId == 4) {
						app.hiddenItem('remark', false);
						app.hiddenItem('ractivityTime', false);
						if (isEdit) {
							app.setForm('ractivityTime', [
								moment(Number(data.startTime) * 1000).format('YYYY-MM-DD'),
								moment(Number(data.endTime) * 1000).format('YYYY-MM-DD')
							]);
							app.setData(
								'upsert.items[prop:pick].component.props.size',
								data.imageSize
							);
						}
					} else {
						app.hiddenItem('remark', true);
						app.hiddenItem('ractivityTime', true);
					}

					const list = await this.$service.systemMenagement.bannerScenario.list();
					app.setData(
						'upsert.items[prop:scenarioId].component.options',
						list.map(e => {
							return {
								label: e.name,
								value: e.id
							};
						})
					);
				})
				.on('submit', (isEdit, data, { next }) => {
					let startTime = '';
					let endTime = '';
					if (data.ractivityTime) {
						startTime = moment(data.ractivityTime[0]).unix();
						endTime = moment(data.ractivityTime[1]).unix();
					}

					delete data.ractivityTime;
					console.log(data);
					if (this.selects.scenarioId == 4) {
						next({
							id: data.id,
							link: data.link,
							title: data.title,
							scenarioId: data.scenarioId,
							status: data.status,
							pick: data.pick,
							remark: data.remark,
							imageSize: data.imageSize,
							type: data.type,
							startTime,
							level: data.level,
							endTime
						});
					} else if (this.selects.scenarioId == 7) {
						next({
							...data
						});
					} else if (this.selects.scenarioId == 9) {
						next({
							id: data.id,
							link: data.link,
							title: data.title,
							scenarioId: data.scenarioId,
							status: data.status,
							pick: data.pick,
							imageSize: data.imageSize,
							tkl: data.tkl,
							level: data.level
						});
					} else {
						delete data.remark;
						next({
							id: data.id,
							link: data.link,
							title: data.title,
							scenarioId: data.scenarioId,
							status: data.status,
							pick: data.pick,
							imageSize: data.imageSize,
							level: data.level
						});
					}
				})
				.done();

			app.refresh({
				scenarioId: this.selects.scenarioId
			});
			this.crud = app;
		},

		onLoad2({ ctx, app }) {
			ctx.service(this.$service.systemMenagement.banner)
				.set('table', {
					columns: [
						{
							type: 'selection',
							align: 'center'
						},
						{
							label: '图片',
							prop: 'pick',
							align: 'center',
							width: 400
						},
						{
							label: '类型',
							prop: 'type',
							align: 'center'
						},
						{
							label: '链接/淘口令',
							prop: 'link',
							align: 'center'
						},
						{
							label: '标题',
							prop: 'title',
							align: 'center'
						},
						{
							label: '时间',
							prop: 'ractivityTime',
							align: 'center'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '备注',
							prop: 'remark',
							align: 'center',
							emptyText: '无'
						}
					]
				})
				.set('upsert', {
					props: {
						width: '500px'
					},
					items: [
						{
							label: '轮播图尺寸',
							prop: 'imageSize',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入图片宽高，逗号隔开'
								}
							}
						},
						{
							label: '图片地址',
							prop: 'pick',
							component: {
								name: 'cl-upload',
								props: {
									height: '126px',
									width: '355px',
									isLimit: true,
									size: ''
								}
							},
							rules: {
								required: true,
								message: '图片地址不能为空'
							}
						},
						{
							label: '标题',
							prop: 'title',
							component: {
								name: 'el-input'
							},
							rules: {
								required: true,
								message: '标题不能为空'
							}
						},
						{
							prop: 'type',
							label: '类型',
							span: 13,
							value: 1,
							component: {
								name: 'el-select',
								attrs: {
									placeholder: '请选择'
								},
								options: [
									{
										label: '复制口令',
										value: 1
									},
									{
										label: '跳转链接',
										value: 2
									}
								],
								on: {
									change(val) {
										if (val == 1) {
											app.hiddenItem('link', true);
											app.hiddenItem('tkl', false);
										} else {
											app.hiddenItem('link', false);
											app.hiddenItem('tkl', true);
										}
									}
								}
							},
							rules: {
								required: true,
								message: '类型不能为空'
							}
						},
						{
							label: '跳转链接',
							prop: 'link',
							hidden: true,
							component: {
								name: 'el-input'
							},
							rules: {
								required: true,
								message: '跳转链接不能为空'
							}
						},
						{
							label: '口令',
							prop: 'tkl',
							hidden: false,
							component: {
								name: 'el-input'
							},
							rules: {
								required: true,
								message: '口令不能为空'
							}
						},
						{
							prop: 'ractivityTime',
							label: '活动时间',
							value: [
								moment().format('YYYY-MM-DD'),
								moment()
									.add(1, 'day')
									.format('YYYY-MM-DD')
							],
							component: {
								name: 'el-date-picker',
								props: {
									type: 'daterange'
								}
							},

							rules: [
								{
									required: true,
									message: '请选择时间'
								}
							]
						},
						{
							label: '场景',
							prop: 'scenarioId',
							component: {
								name: 'el-select',
								options: []
							},
							rules: {
								required: true,
								message: '场景不能为空'
							}
						},
						{
							label: '状态',
							prop: 'status',
							value: 'open',
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '启用',
										value: 'open'
									},
									{
										label: '禁用',
										value: 'close'
									}
								]
							},
							rules: {
								required: true,
								message: '状态不能为空'
							}
						},
						{
							prop: 'remark',
							label: '备注',
							component: {
								name: 'el-input'
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'multi-delete-btn', 'flex1'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', async (isEdit, data) => {
					if (this.selects.scenarioId) {
						app.setForm('scenarioId', this.selects.scenarioId);
					}

					const list = await this.$service.systemMenagement.bannerScenario.list();

					app.setData(
						'upsert.items[prop:scenarioId].component.options',
						list.map(e => {
							return {
								label: e.name,
								value: e.id
							};
						})
					);
					if (isEdit) {
						app.setForm('ractivityTime', [
							moment(data.startTime * 1000).format('YYYY-MM-DD'),
							moment(data.endTime * 1000).format('YYYY-MM-DD')
						]);
						app.setData('upsert.items[prop:pick].component.props.size', data.imageSize);

						if (data.type == 1) {
							app.hiddenItem('tkl', false);
							app.hiddenItem('link', true);
						} else {
							app.hiddenItem('tkl', true);
							app.hiddenItem('link', false);
						}
					} else {
						app.hiddenItem('tkl', false);
						app.hiddenItem('link', true);
					}
				})
				.on('submit', (isEdit, data, { next }) => {
					let startTime = moment(data.ractivityTime[0]).unix();
					let endTime = moment(data.ractivityTime[1]).unix();

					delete data.ractivityTime;
					delete data.key;
					delete data.name;
					console.log(data);
					next({
						...data,
						startTime,
						endTime
					});
				})
				.done();
			app.refresh({
				scenarioId: this.selects.scenarioId
			});
			this.crud2 = app;
		},
		refresh(params) {
			this.crud.refresh(params);
		},

		refreshScenario() {
			this.$service.systemMenagement.bannerScenario.list().then(res => {
				res.unshift({
					name: '全部',
					id: ''
				});
				this.options.scenario = res;
			});
		},

		changeScenario(id) {
			this.selects.scenarioId = id;
			this.$nextTick(() => {
				if (id == 3) {
					this.crud2.refresh({ scenarioId: this.selects.scenarioId });
				} else {
					this.crud.refresh({ scenarioId: this.selects.scenarioId });
				}
			});
		},

		openScenarioForm(event, data) {
			let list = [];

			if (!data) {
				list = [
					{
						label: '新增',
						'suffix-icon': 'el-icon-plus',
						callback: (item, done) => {
							this.upsertScenario();
							done();
						}
					}
				];
			} else {
				list = [
					{
						label: '编辑',
						'suffix-icon': 'el-icon-edit',
						callback: (item, done) => {
							this.upsertScenario(data);
							done();
						}
					}
				];
			}

			this.$refs['scenario-context-menu'].open(event, {
				list
			});
		},

		upsertScenario(item = {}) {
			this.$refs['scenario-form'].open({
				props: {
					title: '场景编辑',
					width: '500px',
					'label-width': '100px'
				},

				items: [
					{
						label: '场景名称',
						prop: 'name',
						value: item.name,
						component: {
							name: 'el-input',
							attrs: {
								placeholder: '请填写场景名称'
							}
						}
					},
					{
						label: '场景关键字',
						prop: 'key',
						value: item.key,
						component: {
							name: 'el-input',
							attrs: {
								placeholder: '请填写场景关键字'
							}
						}
					}
				],

				on: {
					submit: ({ data, done, close }) => {
						const fn = item.id ? 'update' : 'add';

						this.$service.systemMenagement.bannerScenario[fn]({
							...data,
							id: item.id
						})
							.then(() => {
								this.$message.success('保存成功');
								this.refreshScenario();
								close();
							})
							.catch(err => {
								this.$message.error(err);
								done();
							});
					}
				}
			});
		}
	}
};
</script>

<style lang="stylus">
.page-banner {
	display: flex;

	.left {
		min-width: 230px;
		background-color: #fff;
		margin-right: 10px;

		.title {
			font-size: 15px;
			height: 40px;
			line-height: 40px;
			padding: 0 10px;
			border-bottom: 1px solid #f7f7f7;
			box-sizing: border-box;
		}

		ul {
			overflow: auto;
			height: calc(100% - 40px);

			li {
				list-style: none;
				height: 40px;
				line-height: 40px;
				padding: 0 10px;
				font-size: 14px;
				cursor: pointer;

				&.active, &:hover {
					background-color: #eee;
				}
			}
		}
	}

	.right {
		flex: 1;
	}
}
</style>
